<template>
  <div>
      <ul>
          <li v-for="(v,i) in list" :key="i" @click="fun(v)">{{v.name}}</li>
      </ul>
      <component :is="el"></component>
  </div>
</template>

<script>
import tuijian from "@/components/type/tuijian.vue"
import shipin from "@/components/type/shipin.vue"
export default {
    data(){
        return{
            el:"tuijian",
            list:[{name:"推荐",el:"tuijian"},
            {name:"食品",el:"shipin"},
            {name:"鞋包",el:"xiebao"},
            {name:"百货",el:"baihuo"},
            {name:"美妆",el:"meizhang"},
            {name:"男装",el:"nanzhuang"},
            {name:"母婴",el:"muying"},
            {name:"健康",el:"jiankang"},
            {name:"内衣",el:"neiyi"},
            {name:"洗护",el:"xihu"},
            {name:"运动",el:"yundong"},
            {name:"车品",el:"chepin"},
            {name:"生鲜",el:"shengxian"},
            {name:"电器",el:"dianqi"},
            {name:"家装",el:"jiazhuang"},
            {name:"家纺",el:"jiafang"},
            {name:"手机",el:"shouji"},
            {name:"数码",el:"shuma"},
            {name:"女装",el:"nvzhuang"},
            {name:"图书",el:"tushu"},
            {name:"充值",el:"chongzhi"},
            {name:"海淘",el:"haitao"},
            {name:"品牌",el:"pinpai"},]
        }
    },methods: {
        fun(v){
            this.el=v.el
            console.log("111")
        }
    },
    components:{
        tuijian,
        shipin,
    }
}
</script>

<style scoped>
    ul{
        width:1.1rem;
        overflow: scroll;
    }
    li{
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.18rem;
    }
</style>